<route lang="json5" type="login_sms">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '短信登录',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'

defineOptions({
  name: 'Result',
})
const model = reactive<{
  phoneTel: string
  verifCode: string
}>({
  phoneTel: '',
  verifCode: '',
})

const form = ref()
const labelWidth = {
  'label-width': '70px',
}
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      console.log('校验通过')
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const rules = {
  phoneTel: [
    { required: true, message: '请输入手机号' },
    { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  verifCode: [
    { required: true, message: '请输入验证码' },
    { required: true, pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
  ],
}
function jumpTo(url: string) {
  uni.navigateTo({ url })
}
</script>

<template>
  <view class="pages">
    <view class="decorate" />
    <wd-form ref="form" class="i-form" :model="model" :rules="rules">
      <view class="i-title">
        短信登录
      </view>
      <wd-cell-group>
        <wd-input
          v-model="model.phoneTel"
          class="i-border-b"
          label="手机号"
          v-bind="labelWidth"
          prop="phoneTel"
          clearable
          placeholder="请输入手机号"
        />
        <wd-cell prop="verifCode" title="验证码" required title-width="70px" custom-value-class="cell-left">
          <view class="flex">
            <wd-input
              v-model="model.verifCode"
              no-border
              custom-style="display: inline-block; flex:1; vertical-align: middle"
              placeholder="请输入验证码"
            />
            <view class="code-btn">
              获取验证码
            </view>
          </view>
        </wd-cell>
      </wd-cell-group>

      <view class="btn-group">
        <wd-button class="i-btn" type="primary" size="small" custom-class="login-btn" block @click="handleSubmit">
          登录
        </wd-button>
        <wd-button class="i-btn" plain type="primary" size="small" block @click="jumpTo('/pages/login/login')">
          返回
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<style lang="scss" scoped>
    .pages{
        width: 100%;
        .decorate {
            width: 100%;
            height: 500rpx;
            background: url('http://mch.longze.net.cn/static/images/top_bg.png') top left no-repeat;
            background-size: 100% 100%;

        }
        .i-title{
              font-weight: bold;
              text-align: center;
              padding-bottom: 30rpx;
            }
        .i-form{
            padding: 60rpx 30rpx;
            margin: -250rpx 8% 0;
            background-color: #fff;
            border-radius: 32rpx;

        }
        .i-link {
                color:$uni-color-primary;
                font-size: 28rpx;
                text-align: right;
                padding: 4px 0;
            }
            .code-btn{
              background-color: #3287e1;
              color: #fff;
              font-size: 24rpx;
              margin-left: 10px;
              width: 70px;
              text-align: center;
              border-radius: 4px;
            }
        .btn-group{
            padding: 60rpx 20%;
            :deep(){
              .login-btn{
                margin-bottom: 20rpx;
              }
            }
        }
        .i-border-b {
            border-bottom: 1px solid #e5e5e5;
        }
        .wd-button{
            height: 70rpx !important;
            font-size: 28rpx !important;
            margin-top: 20rpx;
        }
    }
    .footer{
      width: 100%;
      position: absolute;
      bottom: calc(30rpx + env(safe-area-inset-bottom));
      text-align: center;
      font-size: 24rpx;
    }
</style>
